<template>
	<view class="container">
		<view class="apply-top" v-if="bset.apply_img" @tap="goto" :data-url="bset.jumpurl">
			<image :src="bset.apply_img" mode="widthFix"></image>
		</view>
		<block v-if="isload">
			<view class="bus-search">
				<view class="search-title">
					<view class="dp-title">
						<view class="dp-title-s1">
							<view class="dp-title-s1-line"></view>
							<view class="dp-title-s1-text">
								<view class="dp-title-s1-text1">
									<text class="dp-title-s1-title1">合作商家</text>
								</view>
							</view>
							<view class="dp-title-s1-line"></view>
						</view>
					</view>
				</view>
				<view class="search-keyword">
					<view class="f1 flex-y-center search-input">
						<input v-model="keyword" placeholder="搜索你感兴趣的商家"
							placeholder-style="font-size:24rpx;color:#101010" confirm-type="search"
							@confirm="search"></input>
					</view>
					<view class="search-btn" @click="search()" :style="{ background: 'rgba(' + t('color1rgb') + ')' }">
						搜索
					</view>
				</view>

				<view class="search-list">
					<!--<view class="search-item">
						<picker @change="cateChange" :value="cindex" :range="cateArr">
							<view class="picker">
							{{cateArr[cindex]?cateArr[cindex]:'类型'}}
							<image src="../../static/img/arrowdown.png"></image>
							</view>
						</picker>
					</view>-->
					<!--<view class="search-item">
						<uni-data-picker :clear-icon="false" :localdata="clist" :border="false" :placeholder="ciddata || '类型'"
							@change="cidchange"></uni-data-picker>
							
						<image src="../../static/img/arrowdown.png"></image>
					</view>-->
					<view class="search-item">
						<uni-data-picker :clear-icon="false" :localdata="areaitem" :border="false"
							:placeholder="regiondata || '地区'" @change="regionchange"></uni-data-picker>

						<image src="../../static/img/arrowdown.png"></image>
					</view>
					<view class="search-item">
						<picker @change="juliChange" :value="jindex" :range="juliArr">
							<view class="picker">
								{{ juliArr[jindex] ? juliArr[jindex] : '距离' }}
								<image src="../../static/img/arrowdown.png"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="item_business">
				<view class="ind_buslist" id="datalist">
					<block v-for="(item, index) in datalist" :key="index">
						<view @tap="goto" :data-url="'/pagesExt/business/detail?id=' + item.id">
							<view class="ind_busbox flex1 flex-row">
								<view class="ind_buspic flex0">
									<image :src="item.logo"></image>
								</view>

								<view class="flex1">
									<view class="bus_title">{{ item.name }}</view>


									<view class="bus_address" v-if="item.address" @tap.stop="openLocation"
										:data-latitude="item.latitude" :data-longitude="item.longitude"
										:data-company="item.name" :data-address="item.address">
										地址：{{ item.address }}
									</view>
									<view class="bus_location">
										<view class="c-juli">
											<image :src="static_url + '/static/img/juli.png'"></image>
											距离{{ item.juli }}
										</view>
										<view class="c-location">
											<view @tap.stop="openLocation" :data-latitude="item.latitude"
												:data-longitude="item.longitude" :data-company="item.name"
												:data-address="item.address" class="location-btn"
												:style="{ background: 'rgba(' + t('color1rgb') + ')' }">导航</view>
										</view>
									</view>
								</view>


							</view>
						</view>
					</block>
					<nomore v-if="nomore"></nomore>
					<nodata v-if="nodata"></nodata>
				</view>
			</view>
			<buydialog v-if="buydialogShow" :proid="proid" @addcart="addcart" @buydialogChange="buydialogChange"
				:menuindex="menuindex"></buydialog>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();

export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,

			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			field: 'juli',
			order: 'asc',
			oldcid: "",
			catchecid: "",
			longitude: '',
			latitude: '',
			clist: [],
			cateArr: [],
			cindex: -1,
			bset: {},
			datalist: [],
			pagenum: 1,
			keyword: '',
			cid: '',
			nomore: false,
			nodata: false,
			types: "",
			showfilter: "",
			showtype: 0,
			buydialogShow: false,
			proid: 0,
			areaitem: [],
			regiondata: '',
			juliArr: ['不限', '1km', '2km', '3km', '4km'],
			julilist: [{ id: 0, name: '不限' }, { id: 1, name: '1km' }, { id: 2, name: '2km' }, { id: 3, name: '3km' }, { id: 4, name: '4km' }],
			juliid: 0,
			jindex: -1,
			ciddata: ''
		};
	},

	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.oldcid = this.opt.cid;
		this.catchecid = this.opt.cid;
		this.cid = this.opt.cid;
		if (this.opt.keyword) {
			this.keyword = this.opt.keyword;
		}

		var that = this
		app.get('Index/getCustom', {}, function (customs) {
			var url = app.globalData.static_url + '/static/area.json';
			uni.request({
				url: url,
				data: {},
				method: 'GET',
				header: {
					'content-type': 'application/json'
				},
				success: function (res2) {
					that.areaitem = res2.data
					console.log(that.areaitem);
				}
			});
		});


		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	onReachBottom: function () {
		if (!this.nodata && !this.nomore) {
			this.pagenum = this.pagenum + 1;
			this.getDataList(true);
		}
	},
	methods: {
		regionchange(e) {
			this.clistshow = false
			const value = e.detail.value
			console.log(value, 999);
			if (value.length == 0) {
				this.regiondata = ''
			} else {
				//this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text
				this.regiondata = value[2].text
			}
			this.pagenum = 1;
			this.datalist = [];
			this.getDataList();
		},
		cidchange(e) {
			const value = e.detail.value
			console.log(e);
			console.log(value, 999);
			if (value.length == 0) {
				this.ciddata = ''
			} else if (value.length == 1) {
				this.catchecid = value
				this.cid = value[0].value
				this.ciddata = value[0].text
			} else if (value.length == 2) {
				this.catchecid = value[1].value
				this.cid = value[1].value
				this.ciddata = value[1].text
			} else {
				this.catchecid = value[1].value
				this.cid = value[1].value
				this.ciddata = value[1].text
			}

			this.pagenum = 1;
			this.datalist = [];
			this.getDataList();
		},
		getdata: function () {
			var that = this;
			that.loading = true;
			app.get('Business/blist', {}, function (res) {
				that.loading = false;
				that.clist = res.clist;
				var clist = res.clist;
				var cateArr = [];
				for (var i in clist) {
					cateArr.push(clist[i].name);
				}
				that.cateArr = cateArr;

				that.bset = res.bset;
				that.showtype = res.showtype || 0;
				that.loaded();
			});
			app.getLocation(function (res) {
				var latitude = res.latitude;
				var longitude = res.longitude;
				that.longitude = longitude;
				that.latitude = latitude;
				that.getDataList();
			},
				function () {
					that.getDataList();
				});
		},
		getDataList: function (loadmore) {
			if (!loadmore) {
				this.pagenum = 1;
				this.datalist = [];
			}
			var that = this;
			var pagenum = that.pagenum;
			var latitude = that.latitude;
			var longitude = that.longitude;
			var keyword = that.keyword;
			that.loading = true;
			that.nodata = false;
			that.nomore = false;
			app.post('Business/blist', {
				pagenum: pagenum,
				cid: that.catchecid,
				juliid: that.juliid,
				field: that.field,
				order: that.order,
				longitude: longitude,
				latitude: latitude,
				keyword: keyword,
				regiondata: that.regiondata
			}, function (res) {
				that.loading = false;
				uni.stopPullDownRefresh();
				var data = res.data;
				if (pagenum == 1) {
					that.datalist = data;
					if (data.length == 0) {
						that.nodata = true;
					}
				} else {
					if (data.length == 0) {
						that.nomore = true;
					} else {
						var datalist = that.datalist;
						var newdata = datalist.concat(data);
						that.datalist = newdata;
					}
				}
			});
		},
		cateChange: function (e) {
			this.cindex = e.detail.value;
			this.catchecid = this.clist[this.cindex].id;
			this.pagenum = 1;
			this.datalist = [];
			this.getDataList();
		},
		juliChange: function (e) {
			this.jindex = e.detail.value;
			this.juliid = this.julilist[this.jindex].id;
			this.pagenum = 1;
			this.datalist = [];
			this.getDataList();
		},
		changetab: function (e) {
			var that = this;
			var cid = e.currentTarget.dataset.cid;
			that.cid = cid
			that.pagenum = 1;
			that.datalist = [];
			that.getDataList();
		},
		search() {
			this.pagenum = 1;
			this.datalist = [];
			this.getDataList();
		},
		sortClick: function (e) {
			var that = this;
			var t = e.currentTarget.dataset;
			that.field = t.field;
			that.order = t.order;
			that.getDataList();
		},
		filterClick: function (e) {
			var that = this;
			var types = e.currentTarget.dataset.types;
			that.types = types;
		},
		openLocation: function (e) {
			//console.log(e)
			var latitude = parseFloat(e.currentTarget.dataset.latitude)
			var longitude = parseFloat(e.currentTarget.dataset.longitude)
			var address = e.currentTarget.dataset.address
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				name: address,
				scale: 13
			})
		},
		phone: function (e) {
			var phone = e.currentTarget.dataset.phone;
			uni.makePhoneCall({
				phoneNumber: phone,
				fail: function () { }
			});
		},
	}
};
</script>
<style lang="scss">
.apply-top {}

.apply-top image {
	width: 100%;
}

.search-keyword {
	display: flex;
	margin: 30rpx;
}

.search-input {
	height: 80rpx;
	line-height: 80rpx;
	width: 80%;
}

.search-input input {
	background-color: #fff;
	height: 80rpx;
	line-height: 80rpx;
	width: 100%;
	padding-left: 18rpx;
}

.search-btn {
	width: 20%;
	color: #fff;
	text-align: center;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0rpx 18rpx 18rpx 0rpx;
}

.item_business {
	width: 100%;
	margin-top: 20rpx;
	font-size: 26rpx;
	padding: 0 24rpx
}

.item_business .ind_busbox {
	width: 100%;
	background: #fff;
	padding: 20rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	border-radius: 8rpx;
	position: relative
}

.item_business .ind_buspic {
	width: 160rpx;
	height: 160rpx;
	margin-right: 28rpx;
}

.item_business .ind_buspic image {
	width: 100%;
	height: 100%;
	border-radius: 8rpx;
	object-fit: cover;
}

.item_business .bus_title {
	font-size: 28rpx;
	color: #010101;
	line-height: 46rpx
}

.item_business .bus_score .img {
	width: 24rpx;
	height: 24rpx;
	margin-right: 10rpx
}

.item_business .bus_score .txt {
	margin-left: 20rpx
}

.item_business .indsale_box {
	display: flex
}

.item_business .bus_sales {
	font-size: 28rpx;
	color: #010101;
	position: absolute;
	top: 20rpx;
	right: 28rpx
}

.item_business .bus_address {
	color: #010101;
	font-size: 28rpx;
	height: 36rpx;
	line-height: 36rpx;
	margin: 20rpx 0rpx;
	display: flex;
	align-items: center;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.item_business .bus_address .x2 {
	padding-left: 20rpx
}

.item_business .prolist {
	white-space: nowrap;
	margin-top: 16rpx;
	margin-bottom: 10rpx;
}

.item_business .prolist .product {
	width: 108rpx;
	height: 160rpx;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-right: 24rpx
}

.item_business .prolist .product .f1 {
	width: 108rpx;
	height: 108rpx;
	border-radius: 8rpx;
	background: #f6f6f6
}

.item_business .prolist .product .f2 {
	font-size: 22rpx;
	color: #FC5648;
	font-weight: bold;
	margin-top: 4rpx
}

.item_business .prolist2 {
	margin-top: 16rpx;
	margin-bottom: 10rpx;
}

.item_business .prolist2 .product {
	width: 118rpx;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column;
	margin-right: 10rpx;
	position: relative;
	min-height: 200rpx;
	padding-bottom: 20rpx
}

.item_business .prolist2 .product .f1 {
	width: 118rpx;
	height: 118rpx;
	border-radius: 8rpx;
	background: #f6f6f6
}

.item_business .prolist2 .product .f2 {
	font-size: 26rpx;
	color: #FC5648;
	font-weight: bold;
	margin-top: 4rpx;
}

.item_business .prolist2 .product .f3 {
	font-size: 22rpx;
	font-weight: normal;
	color: #aaa;
	text-decoration: line-through;
}

.item_business .prolist2 .product .f4 {
	font-size: 20rpx;
	font-weight: normal;
	color: #888;
}

.item_business .prolist2 .product .f5 {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	position: absolute;
	display: relative;
	top: 140rpx;
	right: 0rpx;
	text-align: center;
}

.item_business .prolist2 .product .f5 .icon_gouwuche {
	font-size: 28rpx;
	height: 48rpx;
	line-height: 48rpx
}

.bus_location {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.bus_location image {
	width: 40rpx;
	height: 40rpx;
}

.c-juli {
	display: flex;
	align-items: center;
}

.c-location {
	width: 130rpx;
	text-align: center;
}

.location-btn {
	color: #fff;
	padding: 12rpx 20rpx;
	border-radius: 38rpx;
}

.item_business .prolist2 .product .f5 .img {
	width: 100%;
	height: 100%
}

.currentScroll::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
}

.currentScroll {
	-ms-overflow-style: none;
}

.currentScroll {
	overflow: -moz-scrollbars-none;
}

.search-title {
	margin: 30rpx 0rpx;
}

.dp-title {
	height: auto;
	position: relative;
	background-color: #F6F6F6;
	margin: 0px 0px 0;
	padding: 6px 36px;
	color: #010101;
}

.dp-title-s1 {
	height: auto;
	overflow: hidden;
	display: flex;
	align-items: center
}

.dp-title-s1-line {
	height: auto;
	padding: 0;
	overflow: hidden;
	flex: 1;
	height: 0;
	border-top: 1px solid #999;
	border-color: #999;
}

.dp-title-s1-text {
	padding: 0 32rpx;
	text-align: center;
}

.dp-title-s1-text1 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center
}

.dp-title-s1-text1 .image {
	text-align: center;
	max-width: 400rpx;
	max-height: 100rpx;
	margin: 0 4rpx;
	height: auto
}

.dp-title-s1-title1 {
	margin: 0 4rpx
}

.dp-title-s1-text2 {
	text-align: center;
	height: 32rpx;
	line-height: 32rpx
}

.dp-title-s2 {
	width: 100%;
	height: auto;
	overflow: hidden;
	display: flex;
	align-items: center
}

.dp-title-s2-text {
	padding: 0;
}

.dp-title-s2-text1 {
	flex: 1;
	display: flex;
	align-items: center;
}

.dp-title-s2-text1 .image {
	max-width: 100rpx;
	max-height: 100rpx;
	margin: 0 2px
}

.dp-title-s2-title1 {
	margin: 0 4rpx
}

.dp-title-s2-text2 {
	text-align: right;
}

.placeholder {
	color: #010101 !important;
}

.search-list {
	display: flex;
	align-items: center;
	background: #fff;
	margin: 0rpx 24rpx;
	padding: 12rpx 0rpx;
}

.search-list .search-item {
	color: #010101;
	flex: 1;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.picker {
	display: flex;
	align-items: center;
}

.search-item image {
	width: 30rpx;
	height: 30rpx;
	margin-left: 12rpx;
}

.uni-data-tree {
	.uni-data-tree-input {
		.input-value {
			.selected-area {
				.selected-list {
					.selected-item {
						display: none;

						&:last-child {
							display: block !important;
						}
					}
				}
			}
		}
	}
}

.item-text {
	text-align: left;
}

.givecontent {
	margin-bottom: 20rpx;
	background: #fff;
	width: 100%;
	border-radius: 12rpx;
	display: flex;
}

.givecontent-item:first-child {
	margin: 0rpx 0rpx 10rpx 0rpx;
}

.givecontent-item {
	margin: 10rpx 0rpx;
	font-size: 26rpx;
	color: #999;
}

.givecontent .label {
	color: #eb544d;
	margin-right: 8rpx;
}

.receive_limit {
	margin-top: 12rpx;
	display: flex;
}

.limit-content {
	font-size: 26rpx;
	color: #999;
}
</style>